<template>
	<view class="root">
		<view class="uni-padding-wrap">
			<!-- <view class="uni-title">这是选项卡页面跳转详情页面的演示，下面是页面跳转时传递过来的标题：</view> -->
		
			<view class="uni-title" v-if="key==='0'">
				<view class="uni-title">计划详情</view>
				<uni-list-item  title="创建时间" :note="obj.createtime" ></uni-list-item>
				<uni-list-item  title="计划状态" :note="getLabel(obj.status)" ></uni-list-item>
				<uni-section title="计划内容" type="line"></uni-section>
				<uni-list v-if="key==='0'" v-for="item in contentToList(obj.description)">
					<uni-list-item  :note="item" ></uni-list-item>
				</uni-list>
			</view>
			
	
			
			<view v-if="key==='1'">
				<view class="uni-title">日期详情</view>
				<uni-list-item  title="创建时间" :note="obj.createtime" ></uni-list-item>
				<uni-list-item  title="更新时间" :note="obj.updatetime" ></uni-list-item>
				<uni-list-item  title="日期类型" :note="getLabel(obj.type)" ></uni-list-item>
				<uni-section title="日期内容" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.name" />
				</view>
				<uni-section title="到期时间" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.endtime" />
				</view>
				<uni-section title="到期剩余时长" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.laset" />
				</view>
			</view>
			
			
			<view v-if="key==='2'">
				<view class="uni-title">购物详情</view>
				<uni-list-item  title="创建时间" :note="obj.createtime" ></uni-list-item>
				<uni-list-item  title="更新时间" :note="obj.updatetime" ></uni-list-item>
				<view class="uni-form-item uni-column">
					<view class="title">购物内容</view>
					<input class="uni-input" disabled="true" type="text" :value="obj.name" />
				</view>
				<uni-section title="购物状态" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="getLabel(obj.status)" />
				</view>
			</view>
			
			<view v-if="key==='3'">
				<view class="uni-title">登录凭证</view>
				<uni-list-item  title="创建时间" :note="obj.createtime" ></uni-list-item>
				<uni-list-item  title="更新时间" :note="obj.updatetime" ></uni-list-item>
				<view class="uni-form-item uni-column">
					<view class="title">凭证内容</view>
					<input class="uni-input" disabled="true" type="text" :value="obj.name" />
				</view>
				<uni-section title="用户名" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.username" />
				</view>
				<uni-section title="密码" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.password" />
				</view>
				<uni-section title="网址" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<!-- <input class="uni-input" disabled="true" type="text" :value="obj.url" /> -->
					<uni-link  class="uni-input" :href="obj.url" :text="obj.url"></uni-link>
				</view>
			</view>
			
			<!-- 网址 -->
			<view v-if="key==='4'">
				<view class="uni-title">网址信息</view>
				<uni-list-item  title="创建时间" :note="obj.createtime" ></uni-list-item>
				<uni-list-item  title="更新时间" :note="obj.updatetime" ></uni-list-item>
				<view class="uni-form-item uni-column">
					<view class="title">网址</view>
					<input class="uni-input" disabled="true" type="text" :value="obj.website" />
				</view>
				<uni-section title="类型" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="getLabel(obj.belongs)" />
				</view>
				<uni-section title="网址" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<!-- <input class="uni-input" disabled="true" type="text" :value="obj.url" /> -->
					<uni-link  class="uni-input" :href="obj.url" :text="obj.url"></uni-link>
				</view>
				<uni-section title="备注" type="line"></uni-section>
				<view class="text-box" scroll-y="true">
					<text>{{obj.remark}}</text>
				</view>
			</view>
			
			<!-- 媒体 -->
			<view v-if="key==='5'">
				<view class="uni-title">媒体内容</view>
				<uni-list-item  title="创建时间" :note="obj.createtime" ></uni-list-item>
				<uni-list-item  title="更新时间" :note="obj.updatetime" ></uni-list-item>
				<view class="uni-form-item uni-column">
					<view class="title">媒体名称</view>
					<input class="uni-input" disabled="true" type="text" :value="obj.name" />
				</view>
				<uni-section title="来源" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.origin" />
				</view>
				<uni-section title="类型" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<input class="uni-input" disabled="true" type="text" :value="getLabel(obj.type)" />
				</view>
				<uni-section title="其他" type="line"></uni-section>
				<view class="uni-form-item uni-column">
					<!-- <view class="title">到期剩余时长</view> -->
					<!-- <input class="uni-input" disabled="true" type="text" :value="obj.url" /> -->
					<input class="uni-input" disabled="true" type="text" :value="obj.other" />
				</view>
			</view>
			
			
		</view>
	</view>
</template>
<script>
	import { request } from '@/common/util.js'
	import { listItem } from '@/common/api'
	export default {
		data() {
			return {
				title: '',
				key: 0,
				id: '',
				obj: {},
				dictItems: [],
				dictItemQuery: [
					{ 'value': 'PlanStatus' },
					{ 'value': 'EndType' },
					{ 'value': 'ShoppingStatus' },
					{ 'value': 'ApiStatus' },
					{ 'value': 'WebSiteType' },
					{ 'value': 'MediaType' }
				],
				tabBars: [{
				    name: '计划',
				    id: 'plan',
					url: "api/plan_info/get?id="
				}, {
				    name: '日期',
				    id: 'date',
					url: "api/date_info/get?id="
				}, {
				    name: '购物',
				    id: 'shopping',
					url: "api/shopping_info/get?id="
				}, {
				    name: '凭证',
				    id: 'creds',
					url: "api/login_creds/get?id="
				}, {
				    name: '网址',
				    id: 'website',
					url: "api/website_info/get?id="
				}, {
				    name: '媒体',
				    id: 'media',
					url: "api/media_info/get?id="
				}],
			}
		},
		onLoad(e) {
			console.log("详情页加载",e)
			this.key = e.key;
			this.id = e.id;
			this.title = e.title || '';
			this.init(this.key);
			this.list();
			console.log(this.key)
		},
		methods: {
			getLabel(value) {
			  // 使用 find() 方法遍历数组，找到匹配的对象
			  const found = this.dictItems.find(item => item.value === value)
			  			
			  // 如果找到匹配的项，返回 label，否则返回一个提示
			  return found ? found.label : ''
			},
			//初始化字典内容
			init(key) {
			  console.log(key)
			  listItem(this.dictItemQuery[key]).then(response => {
							console.log("listItem",response)
				this.dictItems = response.obj
			  })
			  
			},
			contentToList(content){
				if(content){
					// 使用正则表达式分割字符串，处理不同的换行符
					let arr = content.split(/\r?\n/);
					return arr;
				}
				
			},
			list() {
				uni.request({
					url: this.$config.apiUrl+this.tabBars[this.key].url+this.id,
					dataType: 'json',
					method: 'GET',
					header: {
						"content-type": "application/json",
						"token": uni.getStorageSync("jwt"),
						"tokenUserId": uni.getStorageSync("userid")
					},
					success: (res) => {
						console.log("get请求成功",res)
						this.obj = res.data.obj;
					},
					fail: (err) => {
						console.log('request fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					},
					complete: () => {
						this.loading = false;
					}
				});
			},
		}
	}
</script>
<style>
</style>
